<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS控制表格的列显示和隐藏</title>

</head>

<script>

/*

 * 控制表格的列显示和隐藏

 * 使用方法：在网页读取时调用control_show()方法即可。

 * 说明：

 * table_cell_dis()方法为获取 显示/隐藏 控制栏。

 * tb_showbox()方法为显示和隐藏的效果具体实现

 * 注：目前该功能仅适用于表格操作！

 *该方法的功能上没问题！但是chrome和火狐的显示效果会出问题！

 * 可修改部分：

 * 表格ID，

 * cate变量赋值

 * 制作人：谭宁宁

 * 制作时间：2011-08-26

 

function control_show(){

//获取id为table_list的表格的所有元素
var table = document.getElementById("table_list");
var cate='';
for(var j=1;j<table.rows[0].cells.length;j++)

{

//此处为写入到表格里的td单元格里的内容，即控制栏

//此处可以修改为你想要样式

//注意input的id和onclick事件！默认checkbox为选中状态
cate+="<span><input id='cbox"+j+"' type='checkbox' checked='checked' onclick='tb_showbox("+j+")' />"+table.rows[0].cells[j].innerHTML+"</span>";
}
//写入到网页里边,这里用了一个id为control的DIV！
document.getElementById('control').innerHTML="<span>显示/隐藏控制</span>"+cate;

}

/*

 * 控制表格列显示或隐藏的具体功能实现

 */
 function tb_contrl(num){
	 var obj = document.getElementById('table_list');
	 for(i=0;i<obj.rows.length;i++){
	 	obj.rows[i].cells[2].style.display  =  "none";
	 }
}
 
function tb_showbox(num){
   var obj = document.getElementById('table_list');
   var box = document.getElementById('cbox');
   alert('显示：'+box.checked);
   if(box.checked){
	     for(i=0;i<obj.rows.length;i++){
	     	obj.rows[i].cells[2].style.display  =  "block";
	     }	  
   }else{
          for(i=0;i<obj.rows.length;i++){
     		obj.rows[i].cells[2].style.display  =  "none";
    	 }
   }

}
</script>


<body onload="tb_contrl(1)">

<input id='cbox' type='checkbox' onclick='tb_showbox(2)' />

<div class="control" id="control"></div>

<table border="1" cellspacing="2" id="table_list">

<tr>

<td class="c_tit">第一行：标题行！</td>

<td>第一列</td>

<td>第二列</td>

<td>第三列</td>

<td>第四列</td>

<td>第五列</td>

</tr>

<tr>

<td class="c_tit">第二行</td>

<td>第一列</td>

<td>第二列</td>

<td>第三列</td>

<td>第四列</td>

<td>第五列</td>

</tr>

<tr>

<td class="c_tit">第三行</td>

<td>第一列</td>

<td>第二列</td>

<td>第三列</td>

<td>第四列</td>

<td>第五列</td>

</tr>

</table>

</body>
</html>